<template>
  <view>
    <view class="h-80 flex align-center justify-around p-lr-40 bg-fff oh">
      <view class="flex1 flex justify-center" v-if="showHospitalResearch">
        <DropDownSelect placeholder="选择医院" :list="hospitalOption" valueKey="hospitalId" @confirm="confirm" />
      </view>
      <view class="flex align-center justify-end flex1">
        <DateTimePicker @unitChange="unitChange" @dateChange="dateChange" />
      </view>
    </view>

    <view class="m-lr-20 pb-50 oys">
      <view class="mt-20 p-tb-20 p-lr-30 box-shadow w-full oh bg-fff br-10" v-for="(item, index) in resultList"
        :key="index" @tap.stop="toOrderDetail(item.staffId, item.hospitalId, item.hospitalName, item.staffName, item.companyId)">
        <view class="flex align-center justify-between">
          <text class="fz-40 font-bold">{{ item.staffName }}</text>
          <image class="w-14 h-28 ml-20 min-w-14" src="@/static/images/common/toPath.png"></image>
        </view>
        <view class="color-CCCCCC fz-24 mt-6">驻点医院：{{ item.hospitalName || '-' }}</view>
        <view class="flex align-center justify-between mt-18 text-left">
          <view class="flex1">巡检：{{ item.inspection.finishTotal }}</view>
          <view class="flex1">用时时长：{{ totalTime(item.inspection, item.maintenance, item.repair) }}</view>
        </view>
        <view class="flex align-center justify-between mt-18 text-left">
          <view class="flex1">保养：{{ item.maintenance.finishTotal }}</view>
          <view class="flex1">工单准时率：{{ punctualRate(item.inspection, item.maintenance, item.repair) }}%</view>
        </view>
        <view class="flex align-center justify-between mt-18">
          <view class="flex1">维修：{{ item.repair.finishTotal }}</view>
          <view class="flex1">工单完成率：{{ finishRate(item.inspection, item.maintenance, item.repair) }}%</view>
        </view>
      </view>
    </view>

    <EmptyIcon v-if="!loading && resultList.length === 0" />

  </view>
</template>

<script>
import DropDownSelect from "../dropDownSelect"
import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";
import DateTimePicker from "../dateTimePicker";

import { getOrderList } from "@/api/statistics/staff"
import { optionAllHospital } from "@/api/hospital/hospital"

export default {
  name: "orderDimension",
  components: { EmptyIcon, DropDownSelect, DateTimePicker },
  created () {
    this.queryParams.companyId = this.$store.getters.companyId !== -1 ? this.$store.getters.companyId : ""
    const curHospitalId = this.$store.getters.curHospitalId !== -1 ? this.$store.getters.curHospitalId : ""
    if (this.$auth.hasRoleOr(['co-admin','admin'])) {
      this.getOptionHospital()
    } else if (this.$auth.hasRole('engineer')) {
      this.queryParams.hospitalId = curHospitalId
      this.queryParams.staffId = this.$store.getters.staffId !== -1 ? this.$store.getters.staffId : ""
    } else if (this.$auth.hasRole('manager')) {
      this.queryParams.hospitalId = curHospitalId
    }
    this.queryParams.year = new Date().getFullYear()
    this.init()
  },
  data () {
    return {
      hospitalOption: [],
      queryParams: {
        year: '',
        month: '',
        day: '',
        week: '',
        unitType: 0,
        pageNum: 1,
        pageSize: 10,
      },
      loading: true,
      hasNext: true,
      resultList: []
    }
  },
  computed: {
    showHospitalResearch () { return !this.$auth.hasRoleOr(['manager', 'engineer']) },
  },
  methods: {
    init () {
      this.loading = true
      getOrderList(this.queryParams).then(res => {
        this.resultList = res.rows || []
        this.hasNext = res.hasNext || false
      }).finally(() => this.loading = false)
    },
    reachBottom(){
      if (!this.loading && this.hasNext) {
        this.getNextList()
      }
    },
    getNextList(){
      this.loading = true
      const params = {
        ...this.queryParams,
        pageNum : this.queryParams.pageNum +1,
      }
      getOrderList(params).then(res => {
        this.queryParams.pageNum++
        this.hasNext = res.hasNext
        this.resultList = [...this.resultList, ...res.rows]
      }).finally(()=>this.loading = false)
    },
    getOptionHospital () {
      optionAllHospital(this.queryParams.companyId).then(res => {
        this.hospitalOption = res.data
      })
    },
    //日期单位变更
    unitChange (unit) {
      this.queryParams.unitType = unit
      // this.init()
    },
    //日期变更
    dateChange (dateObj) {
      this.queryParams.year = dateObj.year
      this.queryParams.month = dateObj.month
      this.queryParams.day = dateObj.day
      this.queryParams.week = dateObj.week
      this.init()
    },
    confirm (hospitalId) {
      if (this.showHospitalResearch) {
        this.queryParams.hospitalId = hospitalId
        this.init()
      }
    },
    toOrderDetail (staffId, hospitalId, hospitalName, staffName ,companyId) {
      const queryParams = {
        staffId,
        hospitalId,
        hospitalName,
        staffName,
        companyId,
        year: this.queryParams.year,
        month: this.queryParams.month,
        week: this.queryParams.week,
        day: this.queryParams.day,
        unitType: this.queryParams.unitType
      }
      this.$tab.navigateTo(`/pages/statistics/staff-order-detail?queryParams=${encodeURIComponent(JSON.stringify(queryParams))}`)
    },
    totalTime (inspection, maintenance, repair) {
      const totalDuration = (inspection.durationTotal || 0) + (maintenance.durationTotal || 0) + (repair.durationTotal || 0)
      if(!totalDuration){
        return '00:00:00'
      }
      const hour = Math.floor(totalDuration / 3600)
      const min = Math.floor(totalDuration % 3600 / 60)
      const second = Math.floor(totalDuration % 3600 % 60)
      return `${hour > 9 ? hour : '0'+ hour}:${min > 9 ? min : '0'+ min}:${second > 9 ? second : '0'+ second}`
    },
    punctualRate (inspection, maintenance, repair) {
      const totalInspectionAndMaintenance = (inspection.total || 0) + (maintenance.total || 0) + (repair.total || 0)
      const finishOnTimeTotal = totalInspectionAndMaintenance - (inspection.timeoutTotal || 0) - (maintenance.timeoutTotal || 0) - (repair.timeoutTotal || 0)
      return finishOnTimeTotal < 0 ? '-'
          : totalInspectionAndMaintenance === 0 ? '100'
          : `${(finishOnTimeTotal / totalInspectionAndMaintenance * 100).toFixed(0)}`
    },
    finishRate (inspection, maintenance,repair) {
      const allTotal = (inspection.total + maintenance.total + repair.total) || 0
      const finishTotal = (inspection.finishTotal + maintenance.finishTotal + repair.finishTotal) || 0
      if(allTotal === 0 || finishTotal === 0){
        return 0
      }
      return Math.round(finishTotal / allTotal * 100)
    }
  },
}
</script>

<style>
page {
  background-color: #eee;
}
</style>
<style lang="scss" scoped>

</style>
